<template>
  <div class="app-container">
      <el-descriptions title="基础信息" :contentStyle="CS" :label-style="LS " :column="3" style="align-content: center;">
        <el-descriptions-item label="用例id">{{Case.caseId}}</el-descriptions-item>
        <el-descriptions-item label="用例名称">{{Case.caseName}}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{Case.createTime}}</el-descriptions-item>
        <el-descriptions-item label="接口名称">{{Case.interfaceName}}</el-descriptions-item>
        <el-descriptions-item label="IP地址">{{Case.ip}}</el-descriptions-item>
        <el-descriptions-item label="参数类型">{{Case.parameterType}}</el-descriptions-item>
        <el-descriptions-item label="端口">{{Case.port}}</el-descriptions-item>
        <el-descriptions-item label="请求路径">{{Case.requestPath}}</el-descriptions-item>
        <el-descriptions-item label="请求方式">{{Case.requsetMethod}}</el-descriptions-item>
        <el-descriptions-item label="合集排序">{{Case.sort}}</el-descriptions-item>
        <el-descriptions-item label="备注">{{Case.remark}}</el-descriptions-item>
      </el-descriptions>
    <div>
      <div class="filter-container">
        <el-row style="left: 80%;">
          <el-button v-waves class="filter-item" type="success" @click="add"  >新增</el-button>
          <el-button v-waves class="filter-item" type="primary" @click="deleteList"  >删除</el-button>
          <el-button v-waves class="filter-item" type="primary" @click="back"  >返回</el-button>
        </el-row>
      </div>
      <el-descriptions title="关联列表">
      </el-descriptions>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="records"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @sort-change="sortChange"
        ref="multipleTable"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column fixed prop="id" label="ID" width="60">
        </el-table-column>
        <el-table-column prop="parameter" label="关联提取值" min-width="200"  :show-overflow-tooltip='true' align="center">
        </el-table-column>
        <el-table-column prop="value" label="关联提取参数" min-width="200" :show-overflow-tooltip='true' align="center">
        </el-table-column>
        <el-table-column prop="regularExpression" label="正则表达式" min-width="200" :show-overflow-tooltip='true' align="center">
        </el-table-column>
        <el-table-column prop="toConfigure" label="使用方式" min-width="100" :show-overflow-tooltip='true' align="center">
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间" min-width="200" :show-overflow-tooltip='true' align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" :show-overflow-tooltip='true' align="center">
          <template slot-scope="scope">
            <el-button @click="deleteOne(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  新增接口 -->
        <el-dialog title="新增关联" :visible.sync="dialogFormVisible" width="500px">
          <el-form :model="AutoExtractionAddFrom">
            <el-form-item label="关联提取值:" :label-width="formLabelWidth">
              <el-input v-model="AutoExtractionAddFrom.parameter" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="正则表达式:" :label-width="formLabelWidth">
              <el-input v-model="AutoExtractionAddFrom.regularExpression" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="使用方式:" :label-width="formLabelWidth">
                <el-select v-model="AutoExtractionAddFrom.toConfigure" clearable placeholder="请选择">
                  <el-option
                    v-for="item in toConfigureType"
                    :key="item.id"
                    :label="item.name"
                    :value="item.spreading">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addAutoExtraction()">确 定</el-button>
          </div>
        </el-dialog>
    </div>
  </div>
</template>

<script>
    import waves from '@/directive/waves'
    import {getCaseDetail,addonePost,deleteAuto,deleteAutoList} from '@/api/automation/autoExtraction'
    export default{
    directives: { waves },  
    name: "autoExtraction",
      data(){
        return {
          CS: {
            'text-align': 'center',  //文本居中
            'min-width': '250px',   //最小宽度
            'word-break': 'break-all'  //过长时自动换行
          },
          LS: {
            'color': '#000',
            'text-align': 'center',
            'font-weight': '600',
            'height': '40px',
            'background-color': 'rgba(255, 97, 2, 0.1)',
            'min-width': '110px',
            'word-break': 'keep-all',
          },
          tableKey:0,
          listLoading: true,
          Case: {},
          records: [],
          dialogFormVisible:false,
          AutoExtractionAddFrom:{},
          toConfigureType: [
            {
                "id": 1,
                "spreading": "A",
                "name": "全局使用"
              },
              {
                "id": 2,
                "spreading": "B",
                "name": "仅下个使用"
              }
          ]
        }
      },
      methods: {
        getCase(){
          this.listLoading=true
          console.log("你好")
          var json = localStorage.getItem("AutoExtractionCase");
          this.Case = JSON.parse(json);
          this.getList(this.Case.caseId);
          setTimeout(() => {
              this.listLoading = false
            }, 1.5 * 1000)
        },
        getList(caseId){
          getCaseDetail(caseId).then(resp=>{
              this.records=resp.data;
              for(var i=0;i<this.records.length;i++){
                if(this.records[i].toConfigure=="A"){
                  this.records[i].toConfigure="全局使用"
                }else{
                  this.records[i].toConfigure="仅下个使用"
                }
              }
          })
        },
        add(){
          this.dialogFormVisible=true;
        },
        addAutoExtraction(){
          this.AutoExtractionAddFrom.caseId=this.Case.caseId;
          addonePost(this.AutoExtractionAddFrom).then(resp=>{
              this.$message({
                message: resp.msg,
                type: 'success'
              });
              this.dialogFormVisible=false;
              this.getList(this.Case.caseId);
            
          })
        },
        deleteOne(id){
          deleteAuto(id).then(resp=>{
              this.$message({
                message: resp.msg,
                type: 'success'
              });
              this.getList(this.Case.caseId);
          })
        },
        deleteList(){
          var AutoExtractionList = [];
          this.$refs.multipleTable.selection.forEach(item => {
            AutoExtractionList.push(item.id);
          });
          deleteAutoList({
                ids:AutoExtractionList
          }).then(resp=>{
              this.$message({
                message: resp.msg,
                type: 'success'
              });
              this.getList(this.Case.caseId);
          })
        },
        back() {
          this.$router.push('/automation/testCollectionDetatil');
        },
      },
      created() {
        this.getCase();
      }
    }
</script>

<style>
</style>
